<template>
  <div class="flex_line_pi" :style="{ alignItems: position ? 'center' : 'inherit' }">
    <div class="flex_line_pi_l" :style="{ width: width, textAlign: textAlign }">
      <span class="drop" v-if="dropshow">*</span> {{ title }}
    </div>
    <div class="flex_line_pi_r">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    dropshow: {
      type: Boolean,
      default: false,
    },
    // 位置
    position: {
      type: Boolean,
      default: true,
    },
    // 宽度
    width: {
      type: String,
      default: "200px",
    },
    // 位置
    textAlign: {
      type: String,
      default: "center",
    },
  },
  data() {
    return {};
  },
  computed: {},
  created() { },
  mounted() { },
  methods: {},
};
</script>

<style lang="less" scoped>
.flex_line_pi {
  font-size: 16px;
  display: flex;
  padding: 7px 0;
  width: 100%;

  .flex_line_pi_l {
    color: #666666;
    white-space: nowrap;
    line-height: 35px;
    padding-right: 10px;
  }

  .flex_line_pi_r {
    color: #333333;
    width: 100%;
  }
}

.drop {
  color: red;
}
</style>